<template>
  <el-card class="box-card">
    <div
      v-for="item in items"
      :key="item.id"
      class="text item"
      :class="{ selected: selectedItem === item }"
      :style="{ color: getColorByStatus(item.status), cursor: 'pointer' }"
      @click="handleComponentClick(item)"
    >
      <i v-if="item.selected" class="el-icon-check" />
      <span>{{ item.content }}</span>
    </div>
<!--    <div v-if="loading" class="loading">加载中...</div>-->

    <!--    <el-dialog-->
    <!--      :visible.sync="dialogVisible1"-->
    <!--      title="详细信息"-->
    <!--      width="30%"-->
    <!--      :before-close="handleClose"-->
    <!--    >-->
    <!--      <p>项目内容：{{ selectedItem && selectedItem.content }}</p>-->
    <!--      <p>项目状态：{{ selectedItem && selectedItem.status }}</p>-->
    <!--      &lt;!&ndash; ... &ndash;&gt;-->
    <!--    </el-dialog>-->

    <!-- 弹出提示框 -->
    <el-tooltip
      v-if="activeComponent"
      :content="`Clicked on: ${activeComponent.name}`"
      placement="top"
      :open-delay="500"
      :visible.sync="tooltipVisible"
    />

    <!-- 组件详细信息模态框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="`${selectedComponent.content}-检查结果`"
      width="60%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="检查部件">
          {{ selectedComponent.part }}
        </el-descriptions-item>
        <el-descriptions-item label="检查结果">
          {{ selectedComponent.result }}
        </el-descriptions-item>
        <el-descriptions-item label="处理意见">
          {{ selectedComponent.result }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 添加更多组件详细信息 -->
<!--      <p v-if="selectedComponent.details"><strong>Details:</strong> {{ selectedComponent.details }}</p>-->
      <span slot="footer" class="dialog-footer">
        <el-row :gutter="50">
        <el-col :span="6" :offset="14" >
          <el-button type="primary" @click="clickWResult(selectedComponent)">录入检查结果</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = false">Close</el-button>
        </el-col>
      </el-row>
        </span>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisibleWresult"
      width="50%"
    >
      <el-container>
        <el-header>处理结果录入</el-header>
        <el-main>
          <el-form ref="form" :model="formData" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="车型">
                  <el-select v-model="formData.vehicleType">
                    <el-option label="HXD1" value="HXD1"></el-option>
                    <!-- 添加更多选项 -->
                  </el-select>
                </el-form-item>
                <el-form-item label="车号">
                  <el-input v-model="formData.vehicleNumber"></el-input>
                </el-form-item>
                <el-form-item label="端号">
                  <el-select v-model="formData.endNumber">
                    <el-option label="B" value="B"></el-option>
                    <!-- 添加更多选项 -->
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formData.date" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="故障">
                  <el-select v-model="formData.failure">
                    <el-option label="智能铁鞋系统故障反馈" value="智能铁鞋系统故障反馈"></el-option>
                    <!-- 添加更多选项 -->
                  </el-select>
                </el-form-item>
                <el-form-item label="照片">
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障现象">
                  <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="formData.failureDescription"></el-input>
                </el-form-item>
                <el-form-item label="故障处理">
                  <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="formData.solutionDescription"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-button type="primary" @click="resetForm">提交</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="dialogVisibleWresult=false" >放弃</el-button>
            </el-col>

          </el-row>

        </el-footer>
      </el-container>
      </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'CheckResult',
  data() {
    return {
      formData: {
        vehicleType: '',
        vehicleNumber: '',
        endNumber: '',
        date: '',
        failure: '',
        failureDescription: '',
        solutionDescription: ''
      },
      dialogVisibleWresult: false,
      dialogVisible_1: false,
      pageSize: 5, // 每页加载的项目数量
      dialogVisible: false, // 控制弹窗显示的变量
      dialogVisible1: false, // 控制弹窗显示的变量
      page: 1, // 当前页数
      loading: false,
      items: [
        { id: 1, content: '网络控制系统', selected: false, status: 'active', result: '检查结果全部正常', part: '空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管' },
        { id: 2, content: '牵引变流器', selected: false, status: 'active', result: '检查结果全部正常', part: '空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管' },
        { id: 3, content: '辅助变流器', selected: false, status: 'inactive', result: '检查结果全部正常', part: '空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管' },
        { id: 4, content: '空气制动系统', selected: false, status: 'inactive', result: '检查结果全部正常', part: '空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管' },
        { id: 5, content: '其他关键部件', selected: false, status: 'inactive', result: '检查结果全部正常', part: '空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、空调、风管、风管、空调、风管、空调、风管、空调、风管' }
      ],
      activeComponent: null,
      tooltipVisible: false,
      selectedItem: null,
      selectedComponent: {}
    }
  },
  computed: {
    noMore() {
      // 假设总项目数量是已知的，这里用100作为示例
      return this.items.length >= 1000
    }
  },
  mounted() {
    // this.loadMore();

  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
    },
    clickWResult(selectedComponent) {
      this.dialogVisibleWresult = true
      console.log('selectedComponent', selectedComponent)
    },
    handleComponentClick(component) {
      this.activeComponent = component
      this.tooltipVisible = true
      setTimeout(() => {
        this.activeComponent = null
        this.tooltipVisible = false
      }, 3000)
      this.selectedComponent = component
      this.dialogVisible = true
    },
    loadMore() {
      // console.log('loadMore called'); // 添加这一行用于调试
      if (this.noMore) return
      this.loading = true
      // 模拟从服务器获取数据
      setTimeout(() => {
        const newItems = Array.from({ length: this.pageSize }, (_, i) => ({
          id: this.items.length + i + 1,
          content: `New Item ${this.items.length + i + 1}`,
          selected: false,
          status: i % 2 === 0 ? 'active' : 'inactive'
        }))

        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
      }, 1000)
    },
    toggleSelect(item) {
      console.log('点击了' + item.content)
      if (this.selectedItem === item) {
        this.selectedItem = null
        item.selected = false
      } else {
        if (this.selectedItem) {
          this.selectedItem.selected = false
        }
        this.selectedItem = item
        item.selected = true
        this.dialogVisible = true // 显示弹窗
      }
    },
    handleClose(done) {
      // 关闭弹窗前的操作
      this.selectedItem = null // 可以选择清除选中项
      done()
    },
    getColorByStatus(status) {
      const statusColors = {
        active: 'lightgreen',
        inactive: 'lightcoral'
      }
      return statusColors[status] || '#f5f7fa'
    }
  }
}
</script>

<style scoped>
/* 移除el-card的边框和阴影 */
.box-card {
  border: none !important; /* 使用 !important 提升优先级 */
  box-shadow: none !important; /* 使用 !important 提升优先级 */
  background-color: transparent; /* 如果需要，也可以将背景设置为透明 */
}

/* 其他样式保持不变 */
.box-card .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent;
  transition: all 0.3s ease-in-out;
}

.box-card .item .el-icon-check {
  margin-right: 8px;
  color: #409EFF;
}

.text.item {
  margin-bottom: 60px;
  padding: 20px;
  font-size: 24px;
}

.text.item:hover {
  background-color: aliceblue;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.text.item.selected {
  background-color: lightblue;
  border-left-color: #409EFF;
}

.text.item:not(.selected):hover {
  background-color: #f0f9eb;
}

.text.item:last-child {
  margin-bottom: 0;
}

.loading {
  text-align: center;
  padding: 10px;
  color: #999;
}

.el-button {
  width: 100%;
  margin-top: 20px;
}
/* 根据需要调整v-footer的样式 */
.v-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

